<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="好友明细" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="r_list">
			<!--<view class="tabs_wrap">
				<u-tabs :list="tabsRlist" :is-scroll="false" :current="tabsrcurrent" @change="tabsRchange" bar-width="134" active-color="#FF9F06" inactive-color="#999999"></u-tabs>
			</view>-->
			<view class="r_list_title">
				<view>好友昵称</view>
				<view v-if="tabsrcurrent == 0">超过N天未下单</view>
				<view v-if="tabsrcurrent == 1">邀请时间</view>
				<!--<view v-if="tabsrcurrent == 0">
					<view>唤醒后可赚</view>
					<view style="font-size: 20rpx;">(根据邀请规则计算)</view>
				</view>-->
				<view v-if="tabsrcurrent == 1">累计收益</view>
			</view>

			<view class="lanjiazai" v-if="skeletonLoading">
				<view>
					<view class="loading_icon">
						<image :src="BestImgUrl + 'loading.gif'" class="loading_gif"></image>
					</view>
					<view class="tag">加载中...</view>
				</view>
			</view>
			<view v-else>
				<view class="r_list_box" v-for="(itemr,indexr) in haoyouList" :key="indexr">
					<view class="l_2">
						<!-- <view class="u_iamge">
							<image :src="itemr.avatar"></image>
						</view> -->
						<view class="u_name">{{ZhiYaoDiyige(itemr.nickname)+'*'}}(ID{{itemr.id}})</view>
					</view>
					<view class="l_1">
						<view v-if="tabsrcurrent == 0">{{itemr.day}}天</view>
						<view v-if="tabsrcurrent == 1">{{itemr.create_time}}</view>
					</view>
					<!--<view class="l_4" v-if="tabsrcurrent == 0" @click="toHuanXing(itemr)"><span>唤醒可赚{{itemr.wake_up_reward_amount}}元</span></view>-->
					<view class="l_5" v-if="tabsrcurrent == 1"><span>{{itemr.amount}}元</span></view>
				</view>
				<view v-if="failTimeOutShow == false">
					<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="40" margin-bottom="26" />
				</view>
			</view>

			<view v-if="failTimeOutShow == true" class="noData_box">
				<image src="/static/images/Frame33412.png" mode="widthFix"></image>
				<view class="timeOut">
					<view>网络好像出问题了～</view>
					<view @click="refurbish()">立即刷新</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tabsRlist: [{
					name: '可唤醒好友'
				}, {
					name: '全部好友'
				}],
				tabsrcurrent: 0,
				haoyouList: [],
				BestImgUrl: app.globalData.imgurlBwc,
				skeletonLoading: true,
				pageSize: 1,
				pageNum: 10,
				failTimeOutShow: false,
				loadingstatus: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '加载中...',
					nomore: '没有更多了'
				},
				is_wake_up: '1'
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			setTimeout(function() {
				that.pageSize = 1
				that.pageNum = 10
				that.skeletonLoading = true
				that.failTimeOutShow = false
				that.getLeaderboard()
				uni.stopPullDownRefresh();
			}, 1500);
		},
		//触底加载
		onReachBottom() {
			let that = this
			that.loadingstatus = 'loading';
			setTimeout(function() {
				that.pageSize++;
				that.getLeaderboard()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		onShow() {
			this.getLeaderboard()
		},
		methods: {
			ZhiYaoDiyige(val){
				return val.substring(0, 1);
			},
			//刷新重试商家列表
			refurbish() {
				let that = this
				that.pageSize = 1
				that.pageNum = 10
				that.failTimeOutShow = false
				that.skeletonLoading = true
				setTimeout(() => {
					that.getLeaderboard()
				}, 2000)
			},
      // 获取邀请好友列表
			getLeaderboard() {
				let that = this
				that.$api.TaskmyMembers({
					is_wake_up: that.is_wake_up, //默认不填，获取全部好友，获取可唤醒好友时传1
					page: that.pageSize,
					limit: that.pageNum,
					order_by: 'amount_asc' //默认amount_desc收益降序、amount_asc收益升序、register_desc按注册时间降序、register_asc按注册时间升序
				}).then(res => {
					setTimeout(() => {
						if (that.pageSize != 1) {
							if (res.data.result.length != 0) {
								that.loadingstatus = 'loading';
								that.haoyouList = that.haoyouList.concat(res.data.result)
							} else {
								that.loadingstatus = 'nomore'
							}
						} else {
							that.haoyouList = res.data.result
							that.loadingstatus = 'nomore'
						}
						that.failTimeOutShow = false
						that.skeletonLoading = false
					}, 2000)
				}).catch(err => {
					if (!err.data) {
						//不存在就是访问超时或者接口错误
						console.log('请求错误或请求超时', err.errMsg)
						that.haoyouList = []
						that.skeletonLoading = false
						that.failTimeOutShow = true
					} else {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			tabsRchange(e) {
				let that = this
				that.tabsrcurrent = e.index;

				that.pageSize = 1
				that.pageNum = 10
				that.haoyouList = []
				that.failTimeOutShow = false
				that.skeletonLoading = true
        console.log('index', e.index)
				if (e.index === 0) {
					that.is_wake_up = '1'
					that.getLeaderboard()
				} else if (e.index === 1) {
					that.is_wake_up = ''
					that.getLeaderboard()
				}

			},
			toHuanXing(){
				uni.navigateTo({
					url: '/subpackageB/pages/Shareposters/Shareposters'
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tab-bar {
		position: absolute;
		bottom: -3px !important;
	}

	.lanjiazai {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.noData_box {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

		margin-top: 0;
		text-align: center;
		color: #999;
		text-align: center;

		image {
			width: 280rpx;
		}

		.timeOut {
			font-size: 12px;
			color: #666;
			margin: 0px 0px 7px;
			display: flex;
			align-items: center;
			justify-content: center;

			view:nth-child(2) {
				color: #FF611E;
				padding-left: 10rpx;
			}
		}

		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;

			.u-size-default {
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
		}
	}

	.r_list {
		padding: 0 30rpx;

		.r_list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 50rpx 0 0 0;

			.l_1 {
				position: relative;
				text-align: center;
				flex: 1;
				font-size: 24rpx;
				color: #666666;
			}

			.l_2 {
				display: flex;
				align-items: center;
				position: relative;
				flex: 1;

				.u_iamge {
					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 200rpx;
						margin-right: 10rpx;
					}
				}

				.u_name {
					font-weight: bold;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			.l_3 {
				font-weight: bold;
			}

			.l_4 {
				flex: 1;
				text-align: center;

				span {
					display: inline-block;
					font-size: 24rpx;
					color: #ffffff;
					width: 192rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background-color: #FF9F06;
					border-radius: 200rpx;
				}
			}
			.l_5 {
				text-align: center;
			
				span {
					display: inline-block;
					font-size: 24rpx;
					color: #FF9F06;
					width: 192rpx;
					font-weight: bold;
					height: 56rpx;
					line-height: 56rpx;
					text-align: right;
				}
			}
		}

		.r_list_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-top: 1px solid #f3f3f3;
			border-bottom: 1px solid #f3f3f3;
			font-size: 24rpx;

			view:nth-child(1) {
				color: #999999;
				flex: 1;
				text-align: left;
			}

			view:nth-child(2) {
				color: #999999;
				flex: 1;
				text-align: center;
			}

			view:nth-child(3) {
				color: #999999;
				flex: 1;
				text-align: right;

				view {
					text-align: center;
				}
			}
		}
	}

	.r_title {
		text-align: center;
		margin: 30rpx 0 16rpx 0;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #FF773A;
		}
	}
</style>